import React, { Component } from "react";

// withRouter是一个高阶组件, 它的目的就是让那些没有路由信息的组件能够拥有路由信息
import { Link, Route, Switch, withRouter } from "react-router-dom";

class Home extends Component {
  render() {
    console.log(this.props);
    return <div>这是home页面</div>;
  }
}
// const Home = () => {
//   return <div>这是Home页面</div>;
// };
class About extends Component {
  render() {
    return <div>这是about页面</div>;
  }
}
// const About = () => {
//   return <div>这是about页面</div>;
// };

class Mine extends Component {
  render() {
    return <div>这是Mine页面</div>;
  }
}

// @withRouter
// class Classify extends Component {
//   render() {
//     console.log(this.props);
//     return <div>分类页面</div>;
//   }
// }
const Classify = withRouter((props) => {
  console.log(props);
  return <div>分类页面</div>;
});

class App extends Component {
  render() {
    return (
      <>
        <h2>react-router-v5-路由组件的渲染方式</h2>
        <ul>
          <li>
            <Link to="/home">首页</Link>
          </li>
          <li>
            <Link to="/about">关于页</Link>
          </li>
          <li>
            <Link to="/mine">我的页</Link>
          </li>
          <li>
            <Link to="/classify">分类页</Link>
          </li>
        </ul>

        <Switch>
          {/* 最常见的渲染路由组件的方式就是使用component属性 */}
          {/* 它既可以渲染函数组件，也可以渲染类组件 */}
          <Route path="/home" component={Home}></Route>

          {/* render也可以用来渲染组件，但是render只能渲染函数组件 */}
          {/* render可以写函数，函数可以写逻辑判断，自行地判断需要返回哪个组件了 */}
          {/* 如果说写了函数，组件想使用路由信息的话，就需要传递props */}
          <Route
            path="/about"
            render={(props) => {
              return <About {...props} />;
            }}
          ></Route>

          {/* children也可以渲染组件 */}
          {/* 在有Switch的情况下效果和render一摸一样 */}
          {/* 在没有Switch的情况下，不管是否匹配url，组件都会被渲染 */}
          <Route path="/mine" children={() => <Mine />}></Route>

          {/* 直接通过插槽内容进行渲染 */}
          {/* 这种方式既能渲染类组件，也能渲染函数组件 */}
          {/* 但是这种方式是获取不到路由信息的 */}
          <Route path="/classify">
            <Classify />
          </Route>
        </Switch>
      </>
    );
  }
}

export default App;
